<template>
    <div style="display: flex;flex-direction: row;margin: 0 20px">
        <div style="flex: 2;display: flex;">
            <img style="height: 60px;line-height: 60px;" src="../assets/img/logo3.png" alt="">
            <h1 style="font-size: 20px;height: 60px;line-height: 60px;margin-left: 10px">
                智汇墨坊
            </h1>
        </div>
        <div style="flex: 5;font-weight: bolder;font-size: medium;">
            <el-menu
                router="router"
                    style="border: none"
                    default-active="/"
                    mode="horizontal"
            >
                <el-menu-item index="/">主页</el-menu-item>
                <el-menu-item index="2">解答</el-menu-item>
                <el-menu-item index="3">项目</el-menu-item>
                <el-menu-item index="4">其他</el-menu-item>
            </el-menu>
        </div>
        <div style="flex: 3;display: flex ;align-items:center">
            <el-space style="line-height:60px " size="large">
                <el-input v-model="input" style="width: 200px;" placeholder="发现资源">
                    <template #append>
                        <el-button :icon="Search"/>
                    </template>
                </el-input>
                <el-button type="primary" round @click="router.push('/add_article')">发布</el-button>
                <el-button v-if="!loginUserStore.loginUser.id" type="primary" round @click="login">登录</el-button>
                <el-dropdown v-else>
                    <el-avatar class="el-dropdown-link"
                               :src="loginUserStore.loginUser.avatarUrl"/>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>
                                <el-link :underline="false" :href="`/user/${userId}/info`">个人主页</el-link>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-link :underline="false" href="">我的文章</el-link>
                                </el-dropdown-item>
                            <el-dropdown-item>Action 3</el-dropdown-item>
                            <el-dropdown-item divided>Action 5</el-dropdown-item>
                            <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-space>
        </div>
        <!-- 弹窗容器 -->
        <el-dialog
            v-model="dialogVisible"
            title=""
            :border="false"
            :close-on-click-modal="false"
            class="tech-login-dialog"
        >
            <login-box/>
        </el-dialog>
    </div>
</template>

<script setup>

import {ref} from 'vue'
import {Search} from '@element-plus/icons-vue'
import myAxios from "@/axios/axios.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {useLoginUserStore} from "@/stores/useLoginUserStore.js";
import LoginBox from "@/components/LoginBox.vue";

const input = ref('')
const router = useRouter()
// 弹窗状态
const dialogVisible = ref(false);
const loginUserStore = useLoginUserStore()
const userId = loginUserStore.loginUser.id
const logout = async () => {
    const res = await myAxios.get("/user/logout");
    console.log(res)
    if (res.code === 0 && res.message) {
        loginUserStore.setLoginUser({
            userName: '未登录',
        })
        ElMessage.success("退出登录成功");
        await router.push("/user/login")
    } else {
        ElMessage.error("退出登录失败，请稍后重试");
    }
}
const login = async () => {
    await router.push("/user/login")
}
const search = () => {
    console.log(input)
}
</script>

<style scoped>
.el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
:deep(.el-input-group__append){
    background-color: var(--el-color-primary);
    color: white;
}
/* 弹窗样式 */
:deep(.tech-login-dialog) {
    --el-dialog-bg-color: #fafafa;
    --el-dialog-border-radius: 28px;
    box-sizing: border-box;
}
</style>